<template>
  <div :class="disabled ? 'disabled-style' : ''">
    <div class="flex w-full items-center justify-center h-8 overflow-hidden">
      <a-select v-model:value="fontFamily" class="w-40" placeholder="请选择" @change="changeFontStyle">
        <a-select-option v-for="(item, index) in fontFamilyOption" :key="index" :value="item.ch">{{ item.ch }}</a-select-option>
      </a-select>
      <a-select v-model:value="fontSize" class="w-24 ml-2" placeholder="请选择" @change="changeFontStyle">
        <a-select-option v-for="(item, index) in 60" :key="index" :value="item">{{ item }}</a-select-option>
      </a-select>
      <a-tooltip placement="top">
        <template #title>
          <span>加粗</span>
        </template>
        <div class="li-box" :class="[bold ? 'li-box-active' : '']" @click=";(bold = !bold), changeFontStyle()">
          <img class="icon" src="@/assets/template-icon/bold.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>斜体</span>
        </template>
        <div class="li-box" :class="[italic ? 'li-box-active' : '']" @click=";(italic = !italic), changeFontStyle()">
          <img class="icon" src="@/assets/template-icon/italic.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>下划线</span>
        </template>
        <div class="li-box" :class="[underline ? 'li-box-active' : '']" @click=";(underline = !underline), changeFontStyle()">
          <img class="icon" src="@/assets/template-icon/underline.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>删除线 </span>
        </template>
        <div class="li-box" :class="[strikeout ? 'li-box-active' : '']" @click=";(strikeout = !strikeout), changeFontStyle()">
          <img class="icon" src="@/assets/template-icon/strikeout.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>下标</span>
        </template>
        <div class="li-box" :class="[Subscript ? 'li-box-active' : '']" @click=";(Subscript = !Subscript), changeSubSup('Subscript')">
          <img class="icon" src="@/assets/template-icon/Superscript.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>上标</span>
        </template>
        <div class="li-box" :class="[Superscript ? 'li-box-active' : '']" @click=";(Superscript = !Superscript), changeSubSup('Superscript')">
          <img class="icon" src="@/assets/template-icon/Subscript.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>大写</span>
        </template>
        <div class="li-box" :class="[ToupperCase ? 'li-box-active' : '']" @click=";(ToupperCase = !ToupperCase), changeSubSup('ToupperCase')">
          <img class="icon" src="@/assets/template-icon/ToupperCase.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>小写</span>
        </template>
        <div class="li-box" :class="[TolowerCase ? 'li-box-active' : '']" @click=";(TolowerCase = !TolowerCase), changeSubSup('TolowerCase')">
          <img class="icon" src="@/assets/template-icon/TolowerCase.png" alt="" />
        </div>
      </a-tooltip>
      <a-divider type="vertical" class="diver" />
      <a-tooltip placement="top">
        <template #title>
          <span>字符边框</span>
        </template>
        <div
          class="li-box font-medium text-border"
          :class="[Fontborder ? 'li-box-active' : '']"
          @click=";(Fontborder = !Fontborder), changeSubSup('Fontborder')"
        >
          A
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>背景色</span>
        </template>
        <div class="li-box font-medium" :class="[BackColor ? 'li-box-active' : '']" @click="() => bgColorInput.$el.click()">
          <span class="inline-block w-full h-full" :style="{ background: bgColorVal }">A</span>
          <a-input ref="bgColorInput" v-model:value="bgColorVal" class="!w-0 !h-0" type="color" @change="changeSubSup('BackColor')" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>字体颜色</span>
        </template>
        <div class="li-box font-medium" :class="[TextColor ? 'li-box-active' : '']" @click="() => textColorInput.$el.click()">
          <span class="inline-block text-color" :style="{ borderBottomColor: textColorVal }"> A </span>
          <a-input ref="textColorInput" v-model:value="textColorVal" class="!w-0 !h-0" type="color" @change="changeSubSup('Color')" />
        </div>
      </a-tooltip>
      <a-divider type="vertical" class="diver" />
      <a-tooltip placement="top">
        <template #title>
          <span>居右</span>
        </template>
        <div class="li-box" :class="[AlignLeft ? 'li-box-active' : '']" @click=";(AlignLeft = !AlignLeft), changeSubSup('AlignLeft')">
          <img class="icon" src="@/assets/template-icon/AlignLeft.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>居中</span>
        </template>
        <div class="li-box" :class="[AlignCenter ? 'li-box-active' : '']" @click=";(AlignCenter = !AlignCenter), changeSubSup('AlignCenter')">
          <img class="icon" src="@/assets/template-icon/AlignCenter.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>居左</span>
        </template>
        <div class="li-box" :class="[AlignRight ? 'li-box-active' : '']" @click=";(AlignRight = !AlignRight), changeSubSup('AlignRight')">
          <img class="icon" src="@/assets/template-icon/AlignRight.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>段前距</span>
        </template>
        <div class="li-box" :class="[RowSpacingTop ? 'li-box-active' : '']" @click=";(RowSpacingTop = !RowSpacingTop), changeSubSup('RowSpacingTop')">
          <img class="icon" src="@/assets/template-icon/RowSpacingTop.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>段后距</span>
        </template>
        <div
          class="li-box"
          :class="[RowSpacingBottom ? 'li-box-active' : '']"
          @click=";(RowSpacingBottom = !RowSpacingBottom), changeSubSup('RowSpacingBottom')"
        >
          <img class="icon" src="@/assets/template-icon/RowSpacingBottom.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>行间距</span>
        </template>
        <div class="li-box" :class="[lineheight ? 'li-box-active' : '']" @click=";(lineheight = !lineheight), changeSubSup('lineheight')">
          <img class="icon" src="@/assets/template-icon/lineheight.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>有序列表</span>
        </template>
        <div
          class="li-box"
          :class="[Insertorderedlist ? 'li-box-active' : '']"
          @click=";(Insertorderedlist = !Insertorderedlist), changeSubSup('Insertorderedlist')"
        >
          <img class="icon" src="@/assets/template-icon/Insertorderedlist.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>无序列表</span>
        </template>
        <div
          class="li-box"
          :class="[Insertunorderedlist ? 'li-box-active' : '']"
          @click=";(Insertunorderedlist = !Insertunorderedlist), changeSubSup('Insertunorderedlist')"
        >
          <img class="icon" src="@/assets/template-icon/Insertunorderedlist.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>首行缩进</span>
        </template>
        <div class="li-box" :class="[FirstLineIndent ? 'li-box-active' : '']" @click=";(FirstLineIndent = !FirstLineIndent), changeSubSup('FirstLineIndent')">
          <img class="icon" src="@/assets/template-icon/FirstLineIndent.png" alt="" />
        </div>
      </a-tooltip>
      <a-divider type="vertical" class="diver" />
      <a-tooltip placement="top">
        <template #title>
          <span>清除字号</span>
        </template>
        <div class="li-box li-last" @click=";(Removefontsize = !Removefontsize), changeSubSup('Removefontsize')">
          <img class="icon" src="@/assets/template-icon/Removefontsize.png" alt="" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top">
        <template #title>
          <span>清除字体</span>
        </template>
        <div class="li-box li-last" @click=";(RemoveFontFamily = !RemoveFontFamily), changeSubSup('RemoveFontFamily')">
          <img class="icon" src="@/assets/template-icon/RemoveFontFamily.png" alt="" />
        </div>
      </a-tooltip>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

defineProps({
  disabled: Boolean
})
const fontFamily = ref('宋体')
const fontSize = ref('12')
const bold = ref(false)
const italic = ref(false)
const underline = ref(false)
const strikeout = ref(false)
const Subscript = ref(false)
const Superscript = ref(false)
const ToupperCase = ref(false)
const TolowerCase = ref(false)
const Fontborder = ref(false)
const BackColor = ref(false)
const TextColor = ref(false)
const AlignLeft = ref(false)
const AlignCenter = ref(false)
const AlignRight = ref(false)
const RowSpacingTop = ref(false)
const RowSpacingBottom = ref(false)
const lineheight = ref(false)
const Insertorderedlist = ref(false)
const Insertunorderedlist = ref(false)
const FirstLineIndent = ref(false)
const Removefontsize = ref(false)
const RemoveFontFamily = ref(false)
const bgColorVal = ref('#ffffff')
const textColorVal = ref('#000000')
const textColorInput = ref(null)
const bgColorInput = ref(null)
const emit = defineEmits(['changeFontStyle', 'changeFontSubSup'])
const fontFamilyOption = ref([
  { ch: '宋体', en: 'SimSun' },
  { ch: '黑体', en: 'SimHei' },
  { ch: '微软雅黑', en: 'Microsoft Yahei' },
  { ch: '微软正黑体', en: 'Microsoft JhengHei' },
  { ch: '楷体', en: 'KaiTi' },
  { ch: '新宋体', en: 'NSimSun' },
  { ch: '仿宋', en: 'FangSong' }
])
const changeFontStyle = () => {
  emit('changeFontStyle', {
    fontFamily: fontFamily.value,
    bold: bold.value,
    fontSize: fontSize.value,
    italic: italic.value,
    underline: underline.value,
    strikeout: strikeout.value
  })
}
const changeSubSup = (val) => {
  if (val === 'Subscript') Superscript.value = false
  if (val === 'Superscript') Subscript.value = false

  if (val === 'ToupperCase') TolowerCase.value = false
  if (val === 'TolowerCase') ToupperCase.value = false

  if (val === 'AlignLeft') {
    AlignCenter.value = false
    AlignRight.value = false
  }
  if (val === 'AlignCenter') {
    AlignLeft.value = false
    AlignRight.value = false
  }
  if (val === 'AlignRight') {
    AlignCenter.value = false
    AlignLeft.value = false
  }

  if (val === 'Subscript' || val === 'Superscript') {
    emit('changeFontSubSup', {
      name: val,
      val: val === 'Subscript' ? Subscript.value : Superscript.value,
      memo: null
    })
  } else if (val === 'ToupperCase' || val === 'TolowerCase') {
    emit('changeFontSubSup', {
      name: val,
      val: val === 'ToupperCase' ? ToupperCase.value : TolowerCase.value,
      memo: null
    })
  } else if (val === 'Fontborder') {
    emit('changeFontSubSup', {
      name: val,
      val: Fontborder.value,
      memo: null
    })
  } else if (val === 'AlignLeft' || val === 'AlignCenter' || val === 'AlignRight') {
    emit('changeFontSubSup', {
      name: val,
      val: formatAlign(val),
      memo: null
    })
  } else if (val === 'RowSpacingTop' || val === 'RowSpacingBottom') {
    let num = 0
    if (val === 'RowSpacingTop') {
      num = prompt('请输入段前距的值：', '')
    } else {
      num = prompt('请输入段后距的值：', '')
    }
    emit('changeFontSubSup', {
      name: 'rowspacing',
      val: false,
      memo: val === 'RowSpacingTop' ? num + ',top' : num + ',bottom'
    })
  } else if (val === 'lineheight') {
    const num = prompt('请输入行间距倍数(默认为1)：', '')
    emit('changeFontSubSup', {
      name: 'lineheight',
      val: false,
      memo: num + ''
    })
  } else if (val === 'Insertorderedlist') {
    emit('changeFontSubSup', {
      name: 'Insertorderedlist',
      val: false,
      memo: null
    })
  } else if (val === 'Insertunorderedlist') {
    emit('changeFontSubSup', {
      name: 'Insertunorderedlist',
      val: false,
      memo: null
    })
  } else if (val === 'FirstLineIndent') {
    emit('changeFontSubSup', {
      name: 'FirstLineIndent',
      val: false,
      memo: null
    })
  } else if (val === 'Removefontsize') {
    emit('changeFontSubSup', {
      name: 'Removefontsize',
      val: false,
      memo: null
    })
  } else if (val === 'RemoveFontFamily') {
    emit('changeFontSubSup', {
      name: 'RemoveFontFamily',
      val: false,
      memo: null
    })
  } else if (val === 'BackColor') {
    emit('changeFontSubSup', {
      name: 'BackColor',
      val: false,
      memo: bgColorVal.value
    })
  } else if (val === 'Color') {
    emit('changeFontSubSup', {
      name: 'Color',
      val: false,
      memo: textColorVal.value
    })
  }
}
const formatAlign = (val) => {
  if (val === 'AlignLeft') {
    return AlignLeft.value
  } else if (val === 'AlignCenter') {
    return AlignCenter.value
  } else {
    return AlignRight.value
  }
}
</script>
<style lang="less" scoped>
.li-box {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  text-align: center;
  cursor: pointer;
  .icon {
    // width: 24px;
    height: 24px;
  }
  .text-color {
    display: inline-block;
    line-height: normal;
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }
}
.li-box:hover {
  background: #f0f2f5;
}
.li-box-active {
  background: #f0f2f5;
}
.diver {
  margin-left: 12px;
}
.text-border {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1f1f1f;
}
.li-last {
  width: 68px !important;
}
</style>
